<template>
  <div class="user-avatar-dropdown">
    <Dropdown placement="bottom-end" transfer trigger="click" @on-click="handleClickUserDropdown">
      <a href="javascript:void(0)">
        <span style="font-size:16px;">{{ userName }}（{{ emailAddress }}）</span>
        <Icon style="margin-left: 4px;" type="ios-arrow-down"></Icon>
        <Avatar :src="userAvatar" style="margin-left:4px;"></Avatar>
      </a>
      <DropdownMenu slot="list">
        <DropdownItem name="profileChange">账户信息</DropdownItem>
        <DropdownItem name="passwordChange">修改密码</DropdownItem>
        <DropdownItem name="loginAttempt">登录记录</DropdownItem>
        <DropdownItem name="avatarChange">更换头像</DropdownItem>
        <DropdownItem divided name="logout">退出登录</DropdownItem>
      </DropdownMenu>
    </Dropdown>
    <profile-change v-if="profileModalMount" v-model="profileModalShow"></profile-change>
    <password-change v-if="passwordModalMount" v-model="passwordModalShow"></password-change>
    <login-attempt v-if="attemptModalMount" v-model="attemptModalShow"></login-attempt>
    <avatar-change v-if="avatarModalMount" v-model="avatarModalShow"
                   @save-success="handleSaveSuccess"></avatar-change>
  </div>
</template>

<script lang="ts">
import {Component, Vue, Prop, Watch, Emit} from 'vue-property-decorator';
import AbpBase from '@/lib/abpbase';
import Util from '@/lib/util';
import ProfileChange from '@/components/user/components/profile-change.vue';
import PasswordChange from '@/components/user/components/password-change.vue';
import LoginAttempt from '@/components/user/components/login-attempt.vue';
import AvatarChange from '@/components/user/components/avatar-change.vue';

@Component({
  components: {AvatarChange, LoginAttempt, PasswordChange, ProfileChange},
})
export default class Profile extends AbpBase {
  name: string = 'Profile';

  @Prop({type: String, required: true, default: ''}) userName: string;
  @Prop({type: String, required: true, default: ''}) userAvatar: string;
  @Prop({type: String, required: true, default: ''}) trueName: string;
  @Prop({type: String, required: true, default: ''}) emailAddress: string;

  profileModalMount: boolean = false;
  profileModalShow: boolean = false;

  passwordModalMount: boolean = false;
  passwordModalShow: boolean = false;

  attemptModalMount: boolean = false;
  attemptModalShow: boolean = false;

  avatarModalMount: boolean = false;
  avatarModalShow: boolean = false;

  async handleClickUserDropdown(name: string) {
    switch (name) {
      case 'profileChange':
        await this.$store.dispatch({
          type: 'app/getCurrentUserProfileForEdit',
        });
        this.profileModalMount = true;
        this.$nextTick(() => {
          this.profileModalShow = true;
        });
        break;
      case 'passwordChange':
        this.passwordModalMount = true;
        this.$nextTick(() => {
          this.passwordModalShow = true;
        });
        break;
      case 'loginAttempt':
        await this.$store.dispatch({
          type: 'app/getRecentUserLoginAttempts',
        });
        this.attemptModalMount = true;
        this.$nextTick(() => {
          this.attemptModalShow = true;
        });
        break;
      case 'avatarChange':
        this.avatarModalMount = true;
        this.$nextTick(() => {
          this.avatarModalShow = true;
        });
        break;
      case 'logout':
        this.$store.commit('app/logout', this);
        Util.abp.auth.clearToken();
        location.reload();
    }
  }

  async handleSaveSuccess() {
    await this.$store.dispatch({
      type: 'app/getProfilePicture',
    });
  }

}
</script>

<style lang="less" scoped>
@import './styles/user-avatar.less';
</style>
